<template>
  <div class="app-container">
    <div style="padding: 10px 0;">
      <div class="button-group">
        <el-button
          type="primary"
          v-if="roleCheck(payLevelSetType.add)"
          @click="openDialog({dialogName: dialogType.editLevelPay, props: {}})"
        >
          新增层级
        </el-button>
        <!--<el-button-->
          <!--type="primary"-->
          <!--v-if="roleCheck(payLevelSetType.updateUserLevel)"-->
          <!--@click="openDialog({dialogName: dialogType.memberSearch, props: {}})"-->
        <!--&gt;-->
          <!--修改用户层级-->
        <!--</el-button>-->
      </div>
    </div>
    <el-table
      border
      :data="tableData"
      v-loading="loading"
      element-loading-text="加载中..."
      class="el-table-align-center"
    >
      <el-table-column label="排序" type="index" fixed="left" width="80" align="center">
      </el-table-column>
      <el-table-column label="层级名称" prop="name" fixed="left" width="150" align="center">
      </el-table-column>
      <el-table-column label="层级类型" prop="name" align="center">
        <template slot-scope="{row}">
          {{getLabel(row.levelType, payEnum.USER_TYPE)}}
        </template>
      </el-table-column>
      <el-table-column label="注册时间" width="180" align="center">
        <template slot-scope="{row}">
          <div> {{row.regFromTime | toTime}}</div>
          <div> {{row.regEndTime | toTime}}</div>
        </template>
      </el-table-column>
      <el-table-column label="存款次数" align="center" width="120">
        <template slot-scope="{row}">
          {{ row.rechargeTimes }}
        </template>
      </el-table-column>
      <el-table-column label="存款总额" align="center" width="120">
        <template slot-scope="{row}">
          {{ row.rechargeTotal | currency }}
        </template>
      </el-table-column>
      <el-table-column label="提款次数" align="center" width="120">
        <template slot-scope="{row}">
          {{ row.withdrawTimes }}
        </template>
      </el-table-column>
      <el-table-column label="提款总额" align="center" width="120">
        <template slot-scope="{row}">
          {{ row.withdrawTotal | currency }}
        </template>
      </el-table-column>
      <el-table-column label="有效投注" align="center" width="120">
        <template slot-scope="{row}">
          {{ row.betTotal | currency }}
        </template>
      </el-table-column>
      <el-table-column label="锁定用户数量" width="120" align="center">
        <template slot-scope="{row}">
          <el-button
            v-if="roleCheck(payLevelSetType.lockedUser)"
            type="text"
            @click="openDialog({dialogName: dialogType.levelMember, props: row })"
          >
            {{row.lockUsers}}
          </el-button>
          <span
            v-else-if="roleCheck({exclude: payLevelSetType.lockedUser})"
          >
            {{row.lockUsers}}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="已设置渠道商户数" prop="name" align="center">
        <template slot-scope="{row}">
          <router-link :to="{path: `/pay/pay-set?tab=two&level=${row.levelId}`}">
            <el-button type="text">{{row.merchantCount || 0}}</el-button>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" width="150" prop="remark">
        <template slot-scope="{row}">
          <el-tooltip effect="dark" :content="row.remark" placement="top">
            <span class="text-nowrap">{{row.remark}}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="280" align="center" fixed="right">
        <template slot-scope="{row}">
          <el-button
            v-if="roleCheck(payLevelSetType.update)"
            type="text"
            @click="openDialog({dialogName: dialogType.editLevelPay, props: row })"
          >
            修改
          </el-button>
          <!--<el-button-->
            <!--v-if="roleCheck(payLevelSetType.delete) && row.sortId!==1"-->
            <!--type="text"-->
            <!--@click="onClickDeleteItem(row)"-->
          <!--&gt;-->
            <!--删除-->
          <!--</el-button>-->
          <!--<router-link :to="{path:'/pay/pay-income-set-list'}">
            <el-button type="text">入款配置总览</el-button>
          </router-link>-->
        </template>
      </el-table-column>
    </el-table>
    <!--<div class="pagination-container">-->
      <!--<el-pagination-->
        <!--background-->
        <!--@size-change="gridSizeChange"-->
        <!--@current-change="gridCurrentChange"-->
        <!--:current-page="filters.page"-->
        <!--:page-sizes="gridPageSize"-->
        <!--:page-size="filters.size"-->
        <!--:layout="gridLayout"-->
        <!--:total="tableData.total"-->
      <!--&gt;-->
      <!--</el-pagination>-->
    <!--</div>-->
    <LevelEditDialog
      v-if="dialogName === dialogType.editLevelPay"
      v-model="dialogVisible"
      :rowData="dialogProps"
      :id="dialogProps.levelId"
      :maxSortId="tableData && tableData.length || 2"
      @submit="submitFinished"
    />
    <MemberSearchDialog
      v-if="dialogName === dialogType.memberSearch"
      v-model="dialogVisible"
      :id="dialogProps.id"
      @submit="submitFinished"
    />
    <LevelMemberDialog
      v-if="dialogName === dialogType.levelMember"
      v-model="dialogVisible"
      :level="dialogProps.level"
      :row-data="dialogProps"
      @submit="submitFinished"
    />
  </div>
</template>


<script>

// constants
import { messageType } from '@/const/enum';
import {
  payLevelSetType,
} from '@/router/payRoutes';

// components
import LevelEditDialog from './levelEditDialog';
import MemberSearchDialog from './memberSearchDialog';
import LevelMemberDialog from './levelMemberDialog';

// services
import {
  getUserLevelList,
  delUserLevel,
} from '@/services/api/userLevel';

// mixins
import { grid, dialog, constsLabel } from '@/build';

const dialogType = {
  editLevelPay: 'level-edit-dialog',
  memberSearch: 'member-search-dialog',
  levelMember: 'level-member-dialog',
};

export default {
  name: 'finance-user-level',
  components: {
    LevelEditDialog,
    MemberSearchDialog,
    LevelMemberDialog,
  },
  mixins: [grid, dialog, constsLabel],
  data() {
    return {
      payLevelSetType,
      tableData: [],
      dialogType,
      filters: {
        page: 1,
        size: 20,
      },
    };
  },
  methods: {
    async onClickDeleteItem({ levelId }) {
      try {
        await this.$confirm('确定要删除此用户层级吗？', '删除层级', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        });
        const [bool, result] = await delUserLevel({ levelId });
        if (!bool) throw new Error(result.message);
        this.getAll();
        this.$notify({
          type: 'success',
          message: '删除成功',
        });
      } catch (e) {
        if (e === messageType.cancel) return;
        this.$message({
          message: e.message,
          type: 'error',
        });
      }
    },
  },
  mounted() {
    this.bindGet(getUserLevelList, 'tableData', {
      action: 'getGrid',
    });
    this.getAll();
  },
};
</script>
